<template>
  <div class="home">
    <div class="steps-box">
      <el-steps :active="formInline.step" finish-status="success" simple class="steps">
        <el-step title="上传" ></el-step>
        <el-step title="核查" ></el-step>
        <el-step title="发送" ></el-step>
      </el-steps>
    </div>
    <div class="form-box">
      <div class="upload" :class="{ 'uploads' : upload1 }">
        <el-form
        style="width: 300px;">
          <el-form-item label="薪资类型">
            <el-select v-model="formInline.region" placeholder="薪资类型">
              <el-option label="薪资" value="薪资"></el-option>
              <el-option label="奖金" value="奖金"></el-option>
            </el-select>
            <el-form-item label="发薪时间" style="margin-top: 10px;">
                <el-col :span="11" style="width: 221px;">
                  <el-date-picker type="date" placeholder="选择日期" v-model="formInline.date" style="width: 100%;"></el-date-picker>
                </el-col>
              </el-form-item>
          </el-form-item>
          <div class="uploadChecks">
            <input type="file" @change="tirggerFile($event)">
            <el-button
                type="success"
                @click="openFullScreen1"
                v-loading.fullscreen.lock="fullscreenLoading">
                上传
              </el-button>
          </div>
        </el-form>
      </div>
      <div class="upload" :class="{'uploads': upload2 }">
      </div>
      <div class="upload" :class="{'uploads': upload3 }">上传数据</div>
    </div>
  </div>
</template>

<script>
import xlsx from 'xlsx'
import Qs from 'qs'
import { uploadXlsx } from '../require/api.js'
export default {
  data () {
    return {
      fullscreenLoading: false,
      active: 0,
      formInline: {
        region: '', // 发薪类型
        date: '', // 时间
        fileList: [], // 文件
        step: 0, // 步骤状态码，
        file: ''
      },
      upload1: true,
      upload2: false,
      upload3: false,
      xlsxObject: ''
    }
  },
  methods: {
    openFullScreen1 () {
      this.fullscreenLoading = true
      setTimeout(() => {
        this.fullscreenLoading = false
        const xlsxData = {
          data: this.xlsxObject,
          userInfo: {
            user: window.localStorage.getItem('user'),
            password: window.localStorage.getItem('password'),
          }
        }
        if (this.xlsxObject !== '') {
          uploadXlsx(Qs.stringify(xlsxData))
            .then((res) => {
              if (res.data.code == 0) {
                this.$message({
                  message: res.data.msg,
                  type: 'success'
                })
              } else {
                this.$message.error(res.data.msg)
              }
            })
        }
      }, (this.xlsxObject.length + 1) / 6 * 10000)
    },
    tirggerFile (e) {
      const that = this
      const files = e.target.files
      if (files.length <= 0) {
        return false
      } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
        return false
      } else {
        that.upload_file = files[0].name // 获取文件名
      }
      const fileReader = new FileReader()
      fileReader.onload = ve => {
        try {
          const data = ve.target.result
          const workbook = xlsx.read(data, {
            type: 'binary'
          })
          const wsname = workbook.SheetNames[0]
          const ws = xlsx.utils.sheet_to_json(workbook.Sheets[wsname]) // 解析到xlsx表
          if (ws[0]['姓名'] && ws[0]['实发工资'] && ws[0]['身份证号码']) {
            this.xlsxObject = ws
            if (this.xlsxObject.length >= 6) {
              this.$message('数据过多，上传请耐心等待')
            }
          } else {
            this.$message.error('数据表错误')
            setTimeout(() => {
              this.$router.go(0)
            }, 1000)
          }
        } catch (e) {
          return false
        }
      }
      fileReader.readAsBinaryString(files[0])
    }
  }
}
</script>

<style scoped>
.steps-box{
  width: 100%;
  height:200px;
  display: flex;
}
.steps-box .steps{
  width: 100%;
  height:200px;
}
.form-box{
  display: flex;
  width:100%;
  height:200px;
  justify-content: center;
  align-items: center;
}
.form-box .upload{
  display: none;
}
.form-box .uploads{
  display: block;
}
.uploadChecks{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>
